<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1、问题描述 
        多个相邻的普通流的块元素垂直方向上margin会折叠。表现为：
            1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
            2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
            3）两个外边距一正一负时，折叠结果是两者的相加的和。
        2、方案
            根据 BFC 的定义，两个元素只有在同一 BFC 内，才有可能发生垂直外边距的重叠，
            包括相邻元素、嵌套元素。
            要解决 margin 重叠问题，只要让它们不在同一个 BFC 内就行。
            对于相邻元素，只要给它们加上 BFC 的外壳，就能使它们的 margin 不重叠；
            对于嵌套元素，只要让父级元素触发 BFC，就能使父级 margin 和当前元素的 margin 不重叠。<img data-rawheight="562" data-rawwidth="717" src="https://pica.zhimg.com/50/68531b6282ba49abcde3b0654419201b_720w.jpg?source=1940ef5c" class="origin_image zh-lightbox-thumb" width="717" data-original="https://pic1.zhimg.com/68531b6282ba49abcde3b0654419201b_r.jpg?source=1940ef5c"/>
        3、外边距塌陷
            1）描述
                两个嵌套关系的（父子关系）块元素，当父元素有上外边距或者没有上外边距（margin-top）
            ，子元素也有上外边距的时候。两个上外边距会合成一个上外边距，
            以值相对较大的上外边距值为准。
            2）方案
                【1】给父元素设置外边框（border）或者内边距（padding）(不建议)
                【2】触发BFC（推荐）
                    BFC：Block Formatting Context，块级格式化上下文，BFC决定了元素对其内容定位
                    ，以及当前元素与其他元素之间的关系和相互作用。其目的就是形成一个独立的空间，
                    让空间中的子元素不会影响到这个独立空间之外的布局。这样我们在写页面的时候就
                    可以根据自己的需求，选择一些比较合适的解决方案，主要解决方案如下：
                    【2-1】子元素或者父元素的float不为none
                    【2-2】子元素或者父元素的position不为relative或static
                    【2-3】父元素的overflow为auto或scroll或hidden
                    【2-4】父元素的display的值为table-cell或inline-block
        4、外边距重叠
            1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）
            2.外层元素padding代替
            3.内层元素透明边框 border:1px solid transparent;
            4.用同一方向的margin，都设置为top或者bottom。
            5.内层元素绝对定位 postion:absolute:
            6.外层元素 overflow:hidden;
            7.内层元素padding:1px;
    -->
</body>
</html>